/**
 * Created by Dalyn on 2017/3/15.
 * 贷款设置-弹框
 */
import React, {Component}from 'react';
import "./css/product.css"
import InputBox from "../../common/InputBox";
import Confirm from "../../common/Confirm";
import {Input,message} from "antd";
import UpdateProductMutation from "./mutation/UpdateProductMutation";
import * as Relay from "react-relay";
import ReactKey from "../../util/ReactKey"
import Util from "../../util/Util"

import {_Modal,_Icon} from 'ANT_DE';
const Modal = _Modal,
       Icon = _Icon;

export default class ProductEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayflag: true,
            hint:"",
            failHint:true
        };

        this.properties={};
        this.goodsInfo;

        this.style_ = {
            confirm: {
                width: '80px',
                height: '30px',
                backgroundColor: "#36b3b3",
                fontSize: "14px",
                color: "#fff",
                marginTop: "16px",
                marginLeft: "20px",
                fontFamily: "Microsoft YaHei"
            },
            addInput: {
                width: "120px",
                height: "22px",
                marginTop: "10px",
                borderColor:"#ededed",
                paddingLeft:5,
                paddingRight:5
            },
        };
        this.isshow = 'none';
        this.isRelay = true;
        this.categoryMapper=this.props.categoryMapper;
        this.messageFlag=true;
    }

    //asdasdasd
    componentWillMount() {

    }
    shouldComponentUpdate(){
        return true;
    }

    /*失去焦点*/
    bluron(type) {
        switch (type) {
            case "productName":{
                let regProductName =/^\s*$/g;

                let value = this.refs["productName"].state.text;

                if (regProductName.test(value)){
                    this.setState({
                        productName:'不能为空！',
                    });
                }else {
                    this.setState({
                        productName:'',
                    });
                }
                break;
            }
        }
    }

    /*获取焦点*/
    focuson(type) {
    }
    updateProduct(){
        Relay.Store.commitUpdate(
            new UpdateProductMutation(this.properties),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.updateGoods.responseData;
                    let this_ = this;
                    if (data.errorCode === "0") {
                        this.setState({
                            displayflag: true
                        });
                        this.props.updateSuccess();
                        Util.messageHint(this_,"success","保存成功");
                    } else {
                        if(data.errorCode == 500){
                            Util.messageHint(this_,"error","服务器错误，请联系系统管理员");
                        }else if(data.errorCode == 9999){
                            Util.messageHint(this_,"error","系统错误，请联系系统管理员");
                        }else {
                            Util.messageHint(this_,"error",data.value);
                        }
                        /*this.setState({
                            hint: data.value,
                            failHint:false
                        },()=>{
                            let timer = setTimeout(()=>{
                                clearTimeout(timer);
                                this.setState({
                                    failHint:true,
                                })
                            },1500);
                        });*/
                    }
                }

            }
        );
    }
    onSure(){

        let regProductName =/^\s*$/g;
        let value = this.refs["productName"].state.text;

        if (regProductName.test(value)){
            this.setState({
                productName: "不能为空"
            });

            return;
        }

        let goodsProperty = this.props.goodsProperty;
        goodsProperty.map((item,index)=>{
            let text = this.refs[item].state.text;
            this.properties[item]=text;
            this.setState({
                [item]:'',
            });
        })
        this.properties["goodsId"] = this.goodsInfo.goodsId;

        this.updateProduct();
        this.setState({
            hint: ""
        });
        this.properties = {};
    }

    showWindow(flag,goodsInfo){
        this.goodsInfo = goodsInfo;

        this.setState({
            displayflag: !flag,
            hint:""
        },()=>{
            this.props.goodsProperty.map((item,index)=>{
                let goodsPropertyName =this.props.propertyMapper[item];
                this.refs[item].setState({
                    text:this.goodsInfo[item]?this.goodsInfo[item]:"",
                    placeholder:"请输入"+goodsPropertyName
                });
            });
        });
    }

    handleCancel(flag) {
        this.setState({
            displayflag: !flag,
            hint:""
        });
        this.properties = {};
        this.props.goodsProperty.map((item,index)=>{
            this.setState({
                [item]:'',
            });
            this.refs[item].setState({
                text:''
            });
        })
    }
    addInput(){
        let goodsProperty = this.props.goodsProperty;
        return goodsProperty.map((item,index)=>{
            let goodsPropertyName =this.props.propertyMapper[item];
            if(item == "productName"){
                return (
                    <div className="product_set_inputBox product_set_float" key={index+"_edit"}>
                        <InputBox
                            className="pro_overflow_inputSty"
                            titletext={this.props.propertyMapper[item]+"："}
                            space={15}
                            style={this.style_.addInput}
                            defaultvalute={"请输入"+goodsPropertyName}
                            ref={item}
                            maxlength={30}
                            bluron={this.bluron.bind(this, item)}
                            focuson={this.focuson.bind(this, item)}
                        />
                        {
                            this.state[item]?(
                                <span className="product_set_hint1">
                                    <Icon type="minus-circle" className="product_set_hint_icon"/>
                                    {this.state[item]}
                                    </span>
                            ):(
                                <span className={this.state[item]?"product_set_hint1":""}> </span>
                            )
                        }
                    </div>
                )
            }else {
                return (
                    <div className="product_set_inputBox product_set_float" key={index+"_edit"}>
                        <InputBox
                            className="pro_overflow_inputSty"
                            titletext={this.props.propertyMapper[item]+"："}
                            space={15} style={this.style_.addInput}
                            defaultvalute={"请输入"+goodsPropertyName}
                            ref={item}
                            maxlength={30} bluron={this.bluron.bind(this, item)}
                            focuson={this.focuson.bind(this, item)}
                        />

                        {/*<span className="product_set_hint1">{this.state[item]}</span>*/}

                        {/* <span>{this.props.propertyMapper[item]+"："}</span>
                         <Input
                         placeholder={"请输入"+this.props.propertyMapper[item]}
                         size="small"
                         className="product_add_input"
                         ref={item}
                         />*/}
                    </div>
                )
            }
        })
    }

    // sdasdasdasdasd
    render() {
        let goodsProperty = this.props.goodsProperty;
        if(goodsProperty==null||goodsProperty==undefined||goodsProperty==""||goodsProperty.length<1){
            goodsProperty = []
        }
        let heightNum = goodsProperty.length%2==0 ?(goodsProperty.length+2):Math.ceil(goodsProperty.length);
        return (
                <Modal
                    visible={!this.state.displayflag}
                    className="batchhint_modal"
                    title="编辑产品"
                    onCancel={this.handleCancel.bind(this, this.state.displayflag)}
                    onOk={this.onSure.bind(this)}
                >
                    <div style={{height:heightNum*18+"px"}}>
                        <div className="product_set_up clear">
                            <div className="product_set_inputBox product_set_float" key={ReactKey.key}>
                                <InputBox
                                    titletext="商品类型:"
                                    className="pro_overflow_inputSty"
                                    space={15}
                                    style={this.style_.addInput}
                                    defaultvalute={this.categoryMapper[this.props.categoryId]}
                                    ref={this.categoryMapper[this.props.categoryId]}
                                    maxlength={30}
                                    disabled="true"
                                />
                                {/*<span className="product_set_hint1"></span>*/}
                            </div>
                            {
                                this.addInput()
                            }
                        </div>
                    </div>

                {/*操作失败的提示*/}
                <div className="settle_fail_bg" style={this.state.failHint ? {display: 'none'} : {display: 'block'}}>
                    {this.state.hint}
                </div>
                </Modal>
        )
    }
}